import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $Lazy, $fn } = window
// ===================================================================== Lazy
const Page 		= $Lazy.load(()=>import('#tp/page/page-container'))
const Button 	= $Lazy.load(()=>import('@antd/button'))
const CodeList 	= $Lazy.hook(()=>import('./cpt/code-list'))
// ===================================================================== data
const PrintData = [{ name:'三联', value:1 }, { name:'六联', value:2 }, { name:'九联', value:3 }]
const width = '20%'
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		formData : [
			{ label: '开始条码',	 name: 'start_code',	width, mb:0	},
			{ label: '结束条码',	 name: 'end_code', 		width, mb:0	},
			{ label: '',	 	 name: 'link',			width, value:1, ml:10, mb:0, type:'select', data:PrintData, onValue: ({ value })=>{
				this.setState({ link: value})
			}},
		],
		link:PrintData[0].value
	}
	submit = {}
	
	fetch = () => {
		const { start_code, end_code } = this.formRef.getValue()
		const start = parseInt(start_code)
		const end = end_code ? parseInt(end_code) : start
		if (!start_code) {
			$fn.msg.error('请先输入条码！')
			return
		}
		if (start > end) {
			$fn.msg.error('开始条码不能大于结束条码！')
			return
		} else {
			let arr = []
			for (let i = start; i <= end; i++) {
				arr.push({code: i.toString()})
			}
			this.setState({data: arr})
			$fn.msg.success('条码生成成功！')
		}
	}
	
	// 操作按钮
	controls = () => [
		Controls.back.call(this)
	]
	
	render(){
		const { submitLoading, data, link } = this.state
		return (
			<Page nobc title='自定义条码生成' controls={this.controls()}>
				{/* 搜索 */}
				<div className='ptb10 fx mb10 bcf'>
					{
						SubmitForm.call(this,{ labelWidth	: 's6' })
					}
					<Button label='生成条码' size='middle' className='mr10' onClick={()=> {
						this.fetch()
					}} />
				</div>
				<CodeList local={true} data={data} loading={submitLoading} link={link} />
			</Page>
		)
	}
}

export default Index